<template>
	<view>
		<image
			class="dish-image"
			:src="image"
			mode="aspectFill"
		></image>
		<!-- 菜品详情 -->
		<view class="dish-detail">
			<view class="dish-detail-row">
				<view class="dish-detail-label">菜名</view>
				<view style="">{{ name }}</view>
			</view>
			<view class="dish-detail-row">
				<view class="dish-detail-label">分类</view>
				<view class="">{{ type }}</view>
			</view>
			<view class="dish-detail-row">
				<view class="dish-detail-label">简介</view>
				<view class="dish-detail-desc">{{ desc }}</view>
			</view>
			<view class="dish-detail-row">
				<view class="dish-detail-label">评分</view>
				<view class="dish-score">
					<uni-rate
						:value="score"
						allowHalf
						readonly
					/>
					<view class="dish-score-rating">{{ score }}</view>
					<view class="dish-score-count">{{ count }}次</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'DishDetail',
	props: {
		image: { type: String, default: '../../static/icons/no-image.svg' },
		name: { type: String, default: '名称' },
		type: { type: String, default: '分类' },
		desc: { type: String, default: '菜品' },
		score: { type: Number, default: 0 },
		count: { type: Number, default: 0 },
	},
	data() {
		return {};
	},
};
</script>

<style scoped>
.dish-image {
	width: 750rpx;
	height: 420rpx;
}
.dish-detail {
	/* padding: 36rpx; */
	padding: 26rpx 0;
	font-size: 14px;
}
.dish-detail-row {
	display: flex;
	align-items: center;
	margin-bottom: 12rpx;
}
.dish-detail-label {
	width: 86rpx;
	margin-left: 32rpx;
	color: #303030;
}
.dish-detail-desc {
	width: 590rpx;
	height: 100rpx;
	display: inline-block;
	height: auto;
	word-break: break-all;
	text-overflow: ellipsis;
	word-wrap: break-word;
	white-space: pre-wrap;
}
.dish-score {
	display: flex;
	align-items: center;
}

.dish-score-rating {
	color: #fac909;
	font-weight: bold;
	width: 66rpx;
	margin-left: 16rpx;
}
.dish-score-count {
	color: #363636;
}
</style>
